<template>
    <div id="user">
        <div class="main">
            <nav>
                <h2>个人信息</h2>
                <div class="back">
                    <el-button type="primary" @click="router.back()">返回页面</el-button>
                </div>
            </nav>
            <div class="info">
                <h2 style="width: 100%; height: 100px; line-height: 100px;">用户头像: <img
                        src="https://img1.baidu.com/it/u=4152366307,3892585726&fm=253&fmt=auto&app=138&f=JPEG?w=987&h=800"
                        class="tx" alt=""> </h2>
                <h2>用户名：{{ name }}</h2>
            </div>
            <el-button type="success" @click="dialogTableVisible = true">更改密码</el-button>
            <el-button type="info" @click="goout">退出账户</el-button>
            <el-dialog v-model="dialogTableVisible" title="更改密码" width="800">
                <el-form label-width="auto" :model="formLabelAlign" style="max-width: 600px" :rules="formRules"
                    ref="formRef">
                    <el-form-item label="旧密码" prop="oldpwd" :label-position="itemLabelPosition">
                        <el-input v-model="formLabelAlign.oldpwd" />
                    </el-form-item>
                    <el-form-item label="新密码" prop="pwd" :label-position="itemLabelPosition">
                        <el-input v-model="formLabelAlign.pwd" />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="newpwd" :label-position="itemLabelPosition">
                        <el-input v-model="formLabelAlign.newpwd" />
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="submitForm">确认更改</el-button>
                <el-button @click="dialogTableVisible = false">取消更改</el-button>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import type { FormItemProps, FormProps } from 'element-plus'
import { ElMessage } from "element-plus";
import axios from 'axios';
let router = useRouter()
let name = ref(localStorage.getItem('name'))
let dialogTableVisible = ref(false)
let itemLabelPosition = ref('top')
let formRef = ref(null) // 引用表单
const formLabelAlign = reactive({
    oldpwd: '',
    pwd: '',
    newpwd: '',
})
let formRules = reactive({
    oldpwd: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
    ],
    pwd: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
    ],
    newpwd: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== formLabelAlign.pwd) {
                    callback(new Error('密码不一致'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }
    ]
})
let submitForm = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            await axios.post('http://localhost:3000/updatepwd', {
                oldpwd: formLabelAlign.oldpwd,
                newpwd: formLabelAlign.newpwd,
            }).then(res => {
                if (res.data.msg === '密码错误') {
                    alert('密码错误');
                }
            });
            dialogTableVisible.value = false
            router.push('/login')
            ElMessage({
                message: "修改成功，请重新登录",
                type: "success",
            });
        }
    });
}
let goout = () => {
    localStorage.removeItem("accessToken");
    localStorage.removeItem("refreshToken");
    localStorage.removeItem("name");
    router.push('/login');
}
</script>

<style scoped>
#user {
    width: 100%;
    height: 100vh;
    background-image: url("https://p3.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/e13b4fdccfb54e7e8ba9eb0392ccea39?from=pc");
    background-size: cover;
    background-position: center;
}

.main {
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.7)
}

nav {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tx {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
</style>
